<template>
    <div class="content-box">
        <AMap ref="myMap" :sid="sid" @handleShowScenic="handleShowScenic" @handleBox="handleBox" @clearTimer="clearTimer" />

        <!-- 头部渐变 -->
		<div class="header-anamorphism">
			<!-- 进度 -->
			<div class="header-progress" v-if="lineData.id">
				<img v-if="info.avatar" class="avatar" :src="info.avatar" />
				<img v-else src="../assets/avatar.png" class="avatar">
				<div class="line">
					<div class="active" :style="{width:((lineData.user_travel.routes_length/lineData.length)*100)+'%'}"></div>
					<div class="now-dis">{{Math.floor((lineData.user_travel.routes_length/lineData.length)*100)}}%</div>
				</div>
				<div class="distance">{{lineData.length}}km</div>
				<div class="more" @click="handleMoreLine">
					更多路线
				</div>
			</div>
		</div>

        <!-- 点击展示景区景点信息 -->
		<div class="center-info" v-if="showPoint">
			<div class="info">
				<img class="cover" @click.stop="handleScenic" :src="checkedScenicData.thumb" />
				<div class="desc">
					<div class="name">{{ checkedScenicData.title }}</div>
					<div class="tags" v-if="checkedScenicData.labels.length > 0">
						<div v-for="item in checkedScenicData.labels" :key="item">{{ item }}</div>
					</div>
					<div class="btn" @click.stop="handleVR">全景VR</div>
				</div>
			</div>
			<div class="bg"></div>
			<div class="bg-bottom"></div>
		</div>

        <!-- go上方提示 -->
		<div class="footer-msg" v-if="showFoot">
			<img class="bg" src="../assets/cloud/show_dis.png" />
			<div class="box">
				<img class="walk" src="../assets/cloud/walk.png" />
				<div class="dis">{{info.steps}}</div>
			</div>
		</div>

        <!-- 底部事件 -->
		<div class="footer-box" @click="handleShowScenic">
			<div class="footer-active" v-show="isMapOk">
				<div class="item rank" @click="handleFirend">
					<img src="../assets/cloud/footer_item.png" />
					<div class="name">同游伙伴</div>
				</div>
				<div class="item-center">
					<div class="box">
						<div class="circle-bar-left" :style="{transform: 'rotate(' + leftDeg + 'deg)'}"></div>
						<div :style="{transform: 'rotate(' + rightDeg + 'deg)'}" :class="['circle-bar-right', {'mask': leftDeg > 0}]"></div>
					</div>
					<div class="go" >
						<img v-if="leftDeg < 180" @click="moveAvator" class="go-img" src="../assets/cloud/go.png" />
						<div v-else @click="lookCertificate" class="completed">查看证书</div>
					</div>
					<div class="center-bg"></div>
					<div class="big-bg"></div>
				</div>
				<div class="item prize" @click="myPrize">
					<img class="reverse" src="../assets/cloud/footer_item.png" />
					<div class="name">我的奖品</div>
				</div>
			</div>
		</div>

        <!-- 同游伙伴弹窗 -->
		<div class="cloud-rank-mask" @click="showRank=false" v-if="showRank"></div>
		<div :class="[showRank ? 'show' : '', 'cloud-rank']">
			<div class="header">
				<div class="title">
					同游伙伴
				</div>
				<div class="close" @click="showRank=false"></div>
			</div>
			<div class="mine" v-if="mineRank">
				<div class="mine-rank">
					{{ mineRank.ranking }}
				</div>
				<img :src="mineRank.avatar" class="avatar" mode="aspectFill" />
				<div class="info">
					<div class="name">{{ mineRank.nickname }}</div>
					<div class="msg">
						参与{{ mineRank.days }}天，已经获得3份奖品+{{ mineRank.point }}积分
					</div>
				</div>
				<div class="mine-num">
					{{ mineRank.progress }}%
				</div>
			</div>
			<div class="tab">
				<div class="rank">
					排名
				</div>
				<div class="tab-name">
					名称
				</div>
				<div class="progress">
					完成进度
				</div>
			</div>
			<div class="list">
				<div class="item" v-for="item in partnerList" :key="item.id">
					<div :class="[item.ranking > 3 ? 'pad-left' : '', 'item-rank']">
						{{ item.ranking > 3 ? item.ranking : '' }}
						<img v-if="item.ranking < 4" :src="item.ranking == 1 ? rank.top1 : item.ranking == 2 ? rank.top2 : rank.top3" mode="aspectFill" />
					</div>
					<img :src="item.avatar" class="item-avatar" mode="aspectFill" />
					<div class="info">
						<div class="item-name">{{ item.nickname }}</div>
						<div class="item-msg">
							参与{{ item.days }}天，已经获得{{ item.receive }}份奖品+{{ item.point }}积分
						</div>
					</div>
					<div :class="['item-num', item.ranking > 3 ? 'gray' : '']">
						{{ item.progress }}%
					</div>
				</div>
			</div>
		</div>

		<!-- 开启宝箱 -->
		<div class="cloud-blind-box" v-if="showBox" @click="showBox=false">
			<div class="content">
				<img src="../assets/cloud/box.png" mode="aspectFill" class="box-img" />
				<div class="tips">
					恭喜您获得一个宝箱
				</div>
				<div class="btn" @click.stop="myPrize">
					去兑奖
				</div>
				<div class="msg">
					再接再厉哦
				</div>
			</div>
		</div>

		<!-- 云游证书 -->
		<div class="poster-content" @click="closeCer" v-show="showPic">
        	<div class="bg-light"></div>
			<div class="myCanvas">
				<!-- <canvas id="myCanvas" width="270" height="378"></canvas> -->
				<canvas id="myCanvas"></canvas>
				<img class="cer-poster" :src="downloadImg" alt="poster">
				<p class="tips">长按保存证书</p>
        		<div class="btn-content">
        		    <div @click.stop="savePoster" class="btn">预览证书</div>
        		    <div @click.stop="nextTrip" class="btn">下一旅程</div>
        		</div>
			</div>
    	</div>

		<!-- 云游中弹窗 -->
		<div v-if="showTourMask" @click="showTourMask=false" class="vip-refund-dialog">
			<div class="box">
				<div class="title">温馨提示</div>
				<div class="msg">{{'您正在云游“'+ lineData.underway_title +'”，如果加入本路线，原路线将重新起步'}}</div>
				<!-- <div class="msg">{{lineData.title}}</div> -->
				<div class="btn">
					<div class="btn-item" @click.stop="goNewLine">确定</div>
					<div class="btn-item" @click.stop="showTourMask=false">取消</div>
				</div>
			</div>
		</div>

    </div>
</template>

<script>
import AMap from './common/amap'
import Apis from '../config/apis'
import certificate from '../assets/certificate.png'
import tourTitle from '../assets/tour-title.png'
import qrcode from '../assets/qrcode.jpg'
import config from '../config/config'
import {
    Toast
} from 'mint-ui'

export default {
    name: 'Index',
    components: {
        AMap,
    },
    data() {
        return {
			showTourMask: false,
            sid: this.$route.query.id,
            dumpurl: '',
			showPoint: false,
            showRank: false,
            rank: {
                top1: config.baseURL+'static/images/default_page_images/badge_top1.png',
                top2: config.baseURL+'static/images/default_page_images/badge_top2.png',
                top3: config.baseURL+'static/images/default_page_images/badge_top3.png'
            },
			showBox: false,
			downloadImg:'',
			certificates: {},
			// isEnd: false,
			// 同游伙伴
			partnerList: [],
			// 自身排名
			mineRank: null,
			// 选中的景区
			checkedScenicData: null,
			timer: null,
			showPic: false
        }
    },
    computed:{
        // 当前分类
        isWeiXin(){
            return this.$store.state.isWeiXin;
        },
		lineData(){
			// console.log('***stattt**', this.$store.state.lineData)
			return this.$store.state.lineData;
		},
		isEnd(){
			var state = this.$store.state.isFinishRoute;
			var show = false;
			if(state && this.certificates.code){
				show = true
			}else{
				this.$store.commit("setIsFinishRoute", false);
			}
			return show;
			// return true;
		},
		isMapOk(){
			return this.$store.state.initMap;
		},
		rightDeg() {
			const progressNum = this.lineData && this.lineData.user_travel ? (this.lineData.user_travel.routes_length / this.lineData.length) * 100 : 0
			return progressNum * 3.6
		},
		leftDeg() {
			const left = this.rightDeg >= 180 ? this.rightDeg - 180 : 0
			return left >= 180 ? 180 : left
		},
		info(){
			return this.$store.state.userInfo;
		},
		showFoot() {
			return this.$store.state.isShowFoot;
		}
    },
	watch: {
		isEnd(val, old){
			console.log('****watch',val,old)
			if(val){
				Toast({
					message: '恭喜完成本路线！证书颁发中...',
					duration: 2000
				})
				setTimeout(() => {
					this.showPic = true
				}, 2000);
			}
			// window.alert('恭喜完成本路线！证书颁发中...')
			// setTimeout(() => {
			// 				this.showPic = true
			// 			}, 2000);
		}
	},
    mounted() {
		this.dumpurl = this.$route.query.url	
		// if(isEnd){
			// console.log('****isend***',this.isEnd)
		// }	
	},
    methods: {
		// 关闭证书弹窗
		closeCer(){
			// this.certificates.code == '';
			// this.$store.commit("setIsFinishRoute", false)
			this.showPic = false
		},
		// 下一路线
		nextTrip(){
			if(this.isWeiXin){
				wx.miniProgram.navigateTo({
					url: '/packages/cloud/line/index'
				})
			}
		},
		toLogin() {
			if(this.isWeiXin){
				return wx.miniProgram.navigateTo({
					url: '/pages/member/login/index?is_back=1'
				})
			}else{
				return Toast('未登录')
			}
		},
		// go
		moveAvator(){
			//    this.$refs.myMap.startAnimation()
			if(!this.info.uid) return this.toLogin()
			// 判断是否进入新路线, 不等于0，有正在云游的路线
			if(this.lineData.underway != 0 && this.lineData.underway != this.lineData.id){
				this.showTourMask = true;
				return;
			}
			
			this.getGoDate();
	   	},
		goNewLine(){
			this.showTourMask = false;
			// console.log('8888')
			this.getGoDate();
		},
		getGoDate(){
			this.axios.post(Apis.travelGo, {
				uid: this.info.uid,
				steps: this.info.steps,
				travel_id: this.info.id
			}).then(res=>{
				console.log('*****gogogo',res)
				this.certificates = res.data;
			
				if(res.data.code != ''){
					this.createPoster()
				}

				// 进度刷新
				// this.lineData.user_travel.routes_length = res.data.length

				// 起点和终点
				var start = this.$store.state.currentPosition;
				var end = Array.from(res.data.position);
				// 总线路点
				var lines = this.$store.state.paintLines;
				var startIndex = lines.findIndex((el)=>{
					return String(el) == String(start)
				})
				var endIndex = lines.findIndex((el)=>{
					return String(el) == String(end)
				})
				// 截取要走的线路长度
				var getline = lines.slice(startIndex, endIndex)

				// 之前走过的线路总长
				var gone = this.$store.state.goneLine
				// 终点位置
				var stopPosition = Array.from(res.data.position);
				this.$store.commit("setCurrentPosition", stopPosition)

				// 一条完整线路的点
				// var lines = this.$store.state.paintLines;
				// var goneLine = [];
                // for(var i=0; i<lines.length; i++){
                //     console.log(lines[i])
                //     goneLine.push(lines[i])
                //     if(String(stopPosition) == String(lines[i])){
                //         // console.log('===========',lines[i])
                //         break;
                //     }
                // }
			
				// 走过的线路的点
				// this.$store.commit('setGoneLine', goneLines)
				// 从新绘制之前走过的线路
				this.$refs.myMap.initPassLine(gone)
				// 开始动画
				const lineKilometre = (this.info.steps - 0) * (this.lineData.steps_rate - 0); // -- 步数换算为米
				const speed = lineKilometre >= 10000 ? 6200 : lineKilometre >= 1000 ? 2000 : 500; // 速度判断，大于等于1w为1km/8s 1km/2s 0-0.9km/0.4s
				// const speedMove = 1000 /  (this.lineData.steps_rate - 0) // 速度判断，大于等于1w为1km/8s 1km/2s 0-0.9km/0.4s
				const moveTime = (lineKilometre / 1000) * speed;
				const loopTime = moveTime / this.info.steps
				this.$refs.myMap.startAnimation(getline, speed)
				this.timer = setInterval(() => {
					this.info.steps -= 1
					this.info.steps <= 0 && (this.info.steps = 0, clearInterval(this.timer))
				}, loopTime)
				// 判断是否存在可显示宝箱
				// this.$refs.myMap.initBox(res.data.steps)
				this.$refs.myMap.initBox(this.info.steps)
			})
		},
		// 监听人像移动完之后清除步数
		clearTimer() {
			this.info.steps = 0;
			clearInterval(this.timer);
		},
		// 查看证书
		lookCertificate(){
			// console.log('****zhenshu')
			this.getCertificate()
		},
		// 获取证书
		getCertificate(){
			this.axios.post(Apis.certificate, {
				uid: this.info.uid,
				travel_id: this.info.id
			}).then(res => {
				// console.log('****res-cer',res)
				this.certificates = res.data;
				this.createPoster()
				// this.$store.commit("setIsFinishRoute", true)
				this.showPic = true

			})
		},
	    // 保存图片
        savePoster(){
				if(this.isWeiXin){
					wx.previewImage({
					  current: this.downloadImg, // 当前显示图片的http链接
					  urls: [this.downloadImg] // 需要预览的图片http链接列表
					});
				}
				// console.log(this.downloadImg)
            	// var Url = this.downloadImg; 
            	// var blob=new Blob([''], {type:'application/octet-stream'});
            	// var url = URL.createObjectURL(blob);
            	// var a = document.createElement('a');
            	// a.href = Url;
            	// a.download = Url.replace(/(.*\/)*([^.]+.*)/ig,"$2").split("?")[0];
            	// var e = document.createEvent('MouseEvents');
            	// e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            	// a.dispatchEvent(e);
            	// URL.revokeObjectURL(url);
			
				// console.log('url****img',url)
           

        },
	    // 生成证书
        async createPoster(){

            let canvas = document.getElementById('myCanvas',this);
            let ctx = canvas.getContext('2d');
			var cWidth = 270;
			var cHeight = 378;
			canvas.style.width = cWidth+'px';
			canvas.style.height = cHeight+'px';
			var scale = window.devicePixelRatio;
			canvas.width = Math.floor(cWidth * scale);
			canvas.height = Math.floor(cHeight * scale)
			ctx.scale(scale,scale)


            ctx.clearRect(0, 0, 270, 378);
			ctx.save()
            // console.log('*****ctx',ctx)
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, 270, 378);

            // 画图片
            var img1 = await this.loadImg(certificate, ctx, 0, 0, 270, 378);
            var img2 = await this.loadImg(tourTitle, ctx, 76, 36, 117, 75);
            var img3 = await this.loadImg(this.certificates.qr_code, ctx, 110, 293, 50, 50);
            ctx.save()
            ctx.restore()

            // 画文字
            ctx.font = "normal 10px Arial";
            ctx.fillStyle = "#000000";
            var txt = this.certificates.code;
            var txtWidth = ctx.measureText(txt).width;
            ctx.fillText(txt, (270/2)-(txtWidth/2), 125);
            ctx.save();
            ctx.restore();
            
            ctx.font = "normal bold 12px Arial";
            ctx.fillStyle = "#A97A4F";
            ctx.fillText(this.info.uname, 38, 165);
            ctx.save();
            ctx.restore();

			var date = new Date(this.certificates.time*1000);
			var year = date.getFullYear();
			var m = date.getMonth()+1; // 月份
			var d = date.getDate(); // 几号
			
			
			var month = m > 9 ? m : '0'+ m;
			var day = d > 9 ? d : '0' + d;
			var time = year+'.'+month+'.'+day;

            var text = '恭喜您于'+ year +'年'+ month +'月'+ day +'日历时'+ this.certificates.days +'天使用'+ this.certificates.steps +'步数完成了'+ this.certificates.length +'公里的“'+ this.certificates.line_title +'”路线的云游。';
            this.drawText(text, ctx, 38, 175, 190);
            ctx.fillText('特颁此证', 38, 270);
            ctx.save();
            ctx.restore();

            ctx.font = "normal 10px Arial";
            ctx.fillStyle = "#44546B";
            
           
            ctx.fillText(time, 38, 320)
            ctx.fillText('一机旅游', 190, 320);
            ctx.save()

		
            this.downloadImg = canvas.toDataURL("image/png"); 
            

            // ctx.draw()
        },
		loadImg(src, ctx, x, y, width, height){
            return new Promise((resolve,resject)=>{
                var img = new Image();
                img.src = src
                img.onload = function(){
                    // console.log('****img-loading',img.src)
                    ctx.drawImage(img, x, y, width, height);
                    resolve(img)
                }
            })
            
        },
        drawText(t,ctx,x,y,w){
				
			var chr = t.split("");
			var temp = "";				
			var row = [];
			
			ctx.font = "12px Arial";
			ctx.fillStyle = "#474644";
			// context.textBaseline = "middle";
			
			for(var i = 0; i < chr.length; i++){
				if( ctx.measureText(temp).width > w ){
					row.push(temp);
					temp = "";
				}
				
				temp += chr[i];
			}
			
			row.push(temp);
			
			for(var j = 0; j < row.length; j++){
				ctx.fillText(row[j],x,y+(j+1)*18);
			}
		},
		// 领取宝箱
	    handleBox(data) {
			const routeData = this.$route.query
			const params = {
				travel_id: routeData.id,
				sid: data.sid,
				gid: data.gid,
				uid: routeData.uid
			}
            this.axios.post(Apis.receiveBox, params).then(res => {
				// 领取成功后展示弹窗
				this.showBox = true
				// 将已领取的弹窗reveice状态修改为0
				let lines = this.lineData.lines.map(el => {
					if (el.sid == data.sid) el.receive = 0
					return el
				})
				// 赋值处理
				let lineData = this.lineData
				lineData.lines = lines
				this.$store.commit('setLineData', lineData)
				// 移除点
				this.$refs.myMap.removeReveiceBox()
				// 重新编写宝箱
				this.$refs.myMap.initBox()
			})
		},
		// 更多路线
		handleMoreLine() {
			if(!this.info.uid) return this.toLogin()
			this.handleShowScenic()
			if(this.isWeiXin){
				wx.miniProgram.navigateTo({
					url: '/packages/cloud/line/index'
				});
			}
		},
		// 我的奖品
		myPrize() {
			if(!this.info.uid) return this.toLogin()
			if(this.isWeiXin){
				wx.miniProgram.navigateTo({
					url: `/packages/treasure-hunt/mine/index?id=${this.$route.query.id}&type=cloud`
				});
			}
		},
		// 跳转景区首页
		handleScenic() {
			wx.miniProgram.navigateTo({
				url: `/packages/scenic/index/index?id=${this.checkedScenicData.id}`
			});
		},
		// 全景VR
		handleVR() {
			if (!this.checkedScenicData.vr_url) return Toast('景区VR建设中~'); // 景区VR建设中
			wx.miniProgram.navigateTo({
				url: `/packages/scenic/vr/index?link=${this.checkedScenicData.vr_url}`
			});
		},
		handleShowScenic(data) {
			const id = data ? data.id : null
			if (id) {
				const scenicList = this.lineData.routes
				this.checkedScenicData = scenicList.find(el => el.id == id)
				// 只保留前3个标签
				if (this.checkedScenicData.labels.length > 3) this.checkedScenicData.labels = this.checkedScenicData.labels.slice(0, 3)
			}
			this.showPoint = !!id
		},
		// 同游伙伴
		handleFirend() {
			if(!this.info.uid) return this.toLogin()
			this.showRank = true
			this.getPartner()
		},
		getPartner(){
            var params = {
                travel_id: this.info.id,
                uid: this.info.uid
            }
            this.axios.post(Apis.cloudPartner, params).then(res => {
				this.partnerList = res.data.ranking
				if (this.partnerList.length > 0) {
					this.partnerList.map(el => {
						el.progress = parseInt(el.progress)
					})
				}
				this.mineRank = Array.isArray(res.data.user) ? null : res.data.user
				if (this.mineRank) this.mineRank.progress = parseInt(this.mineRank.progress)
            })
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.content-box {
	line-height: 1;
}
#amap {
    height: 100vh;
    width: 100%;
}
.pa {
    position: absolute;
}
.pr {
    position: relative;
}
.flex {
    display: flex;
}
.text-ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
}
.common-icon {
	display: inline-block;
	vertical-align: sub;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.header-anamorphism {
	@extend .pa;
	top: 0;
	left: 0;
	right: 0;
	height: 2.1rem;
	// background: linear-gradient(0deg, rgba(255, 255, 255, 0) 26%, rgba(0, 96, 255, .8) 100%);
	.header-progress {
		@extend .flex;
		align-items: center;
		@extend .pa;
		left: 0.6rem;
		right: 0.6rem;
		bottom: 0.6rem;
		background: #fff;
		border-radius: 22.5px;
		padding: 0.1rem;
	}
	.avatar {
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
	}
	.line {
		@extend .pr;
		width: 2.4rem;
		height: 0.2rem;
		background: linear-gradient(0deg, rgba(0, 96, 255, .2) 0%, rgba(72, 201, 255, .2) 100%);
		border-radius: 0.1rem;
		margin: 0 7px;
		overflow: hidden;
	}
	.active {
		@extend .pa;
		top: 0;
		left: 0;
		bottom: 0;
		height: 0.2rem;
		background: linear-gradient(0deg, #2A48FF 0%, #48C9FF 100%);
		border-radius: 0.1rem;
	}
	.now-dis {
		@extend .pa;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 10px;
		color: #333;
	}
	.distance {
		font-size: 12px;
		color: #666;
	}
	.more {
		margin-left: 0.5rem;
		width: 1.5rem;
		text-align: center;
		height: 0.7rem;
		line-height: 0.7rem;
		background: linear-gradient(0deg, #1498EC 0%, #48C1FF 100%);
		border-radius: 35rem;
		font-size: 14px;
		font-weight: bold;
		color: #fff;
	}
}
.info-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
	z-index: 9;
}
.center-info {
	position: fixed;
	left: 50%;
	bottom: 4rem;
	width: 5.2rem;
	height: 1.8rem;
	transform: translateX(-50%);
	z-index: 10;
	.info {
		@extend .flex;
		@extend .pa;
		top: 0;
		left: 0;
		z-index: 3;
		width: 5rem;
		height: 1.6rem;
		background: #fff;
		border-radius: 0.2rem;
	}
	.cover {
		width: 1.6rem;
		height: 1.6rem;
		border-radius: 0.2rem;
		flex: 0 0 auto;
		object-fit: cover;
	}
	.desc {
		width: 100%;
		padding: 0.14rem 0.2rem 0.1rem;
		box-sizing: border-box;
	}
	.name {
		@extend .text-ellipsis;
		max-width: 3rem;
		font-size: 0.28rem;
		font-weight: bold;
		color: #333;
		text-align: left;
	}
	.tags {
		@extend .flex;
		align-items: center;
		height: auto;
		max-width: 3rem;
		margin: 0.15rem 0 0.12rem 0;
		div {
			@extend .text-ellipsis;
			max-width: 1rem;
			margin-right: 0.1rem;
			padding: 0.06rem;
			border-radius: 0.03rem;
			font-size: 0.24rem;
			background: rgba(72, 193, 255, .1);
			color: #48C1FF;
			border-radius: 0.02rem;
			box-sizing: border-box;
			&:last-child {
				margin-right: 0;
			}
			&:first-child {
				text-shadow: 0px 0.02rem 0px rgba(0, 3, 4, 0.2);
				background: linear-gradient(90deg, #FFAC36, #FF8B36);
				color: #fff;
			}
		}
	}
	.btn {
		@extend .pa;
		bottom: 0.1rem;
		right: 0.2rem;
		width: 1.4rem;
		text-align: center;
		height: 0.46rem;
		line-height: 0.46rem;
		background: linear-gradient(0deg, #1498EC 0%, #48C1FF 100%);
		border-radius: 0.1rem;
		font-size: 0.28rem;
		color: #fefefe;
	}
	.bg {
		@extend .pa;
		width: 5rem;
		height: 1.6rem;
		background: rgba(240, 244, 249, .5);
		// box-shadow: 0px 1px 2px 0px rgba(232, 237, 248, 0.4);
		opacity: .4;
		border-radius: 0.2rem;
		top: 0.1rem;
		left: 0.1rem;
		z-index: 2;
	}
	.bg-bottom {
		@extend .pa;
		width: 5rem;
		height: 1.6rem;
		background: rgba(232, 237, 248, .5);
		// box-shadow: 0px 1px 2px 0px rgba(232, 237, 248, 0.5);
		opacity: .3;
		border-radius: 0.2rem;
		top: 0.2rem;
		left: 0.2rem;
		z-index: 1;
	}
}
.footer-msg {
	position: fixed;
	bottom: 2.84rem;
	left: 50%;
	transform: translateX(-50%);
	width: 2rem;
	height: 0.8rem;
	.bg {
		@extend .pr;
		width: 100%;
		height: 100%;
	}
	.box {
		@extend .pa;
		@extend .flex;
		align-items: flex-end;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.walk {
		width: 0.4rem;
		height: 0.4rem;
		margin-right: 0.14rem;
	}
	.dis {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
}
.footer-box {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 3rem;
	background: linear-gradient(0deg, rgba(0, 96, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
	padding: 0 0.3rem;
	box-sizing: border-box;
	// pointer-events: none;
}
.footer-active {
	@extend .pa;
	left: 0;
	right: 0;
	bottom: 0.6rem;
	height: 1.9rem;
	@extend .flex;
	align-items: flex-end;
	justify-content: space-between;
	.item {
		@extend .pr;
		width: 2.96rem;
		height: 1.4rem;
		box-sizing: border-box;
		z-index: 9;
		img {
			@extend .pa;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			vertical-align: middle;
		}
		&.rank {
            text-align: left;
			padding-left: 0.6rem;
		}
		&.prize {
			text-align: right;
			padding-right: 0.6rem;
		}
	}
	.reverse {
		transform: rotateY(180deg);
	}
	.name {
		@extend .pr;
		z-index: 2;
		line-height: 1.36rem;
		font-size: 18px;
		color: #fff;
	}
	.item-center {
		@extend .pa;
		top: calc(50% - 2px);
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 1.8rem;
		width: 1em;
		height: 1em;
		background: #0060FF;
		border-radius: 50%;
	}
	.center-bg {
		@extend .pa;
		top: calc(50%);
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 1.8rem;
		width: 1em;
		height: 1em;
		box-shadow: 0px 0px 0px 10px #4fb6e9;
		opacity: 0.18;
		filter: blur(1.4px);
		border-radius: 50%;
		z-index: 2;
	}
	.big-bg {
		@extend .pa;
		top: calc(50%);
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 1.8rem;
		width: 1em;
		height: 1em;
		box-shadow: 0px 0px 0px 35px #56bff3;
		opacity: 0.12;
		filter: blur(1.4px);
		border-radius: 50%;
	}
	.box {
		@extend .pa;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		@extend .flex;
		overflow: hidden;
	}
	.circle-bar-left,
	.circle-bar-right {
		width: 1em;
		height: 1em;
		// background: linear-gradient(180deg, #15489C 0%, #387B9C 100%);
		background: #387B9C;
	}
	.circle-bar-right {
		transform-origin: 0;
		clip:rect(0, auto, auto, .5em);
		&.mask {
			transform: rotate(0) !important;
			background: #0060FF;
			z-index: 3;
		}
	}
	.circle-bar-left {
		z-index: 2;
		transform-origin: right;
		clip:rect(0, .5em, auto, 0);
	}
	.go {
		@extend .pa;
		z-index: 9;
		font-size: 1.6rem;
		width: 1em;
		height: 1em;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #e4e4e4;
		border-radius: 50%;
	}
	.go-img {
		@extend .pa;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 1rem;
		width: 1em;
		height: .5em;
	}
	.completed {
		@extend .pa;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 0.36rem;
		// white-space: nowrap;
		color: #0060FF;
		font-weight: bold;
	}
}
.cloud-rank-mask,
.cloud-blind-box {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
}
.cloud-rank {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-height: 7.36rem;
	overflow-y: auto;
	background: #fff;
	border-radius: 0.2rem 0.2rem 0px 0px;
	box-sizing: border-box;
	z-index: 9;
	transition: all .6s ease;
	transform: translateY(100%);
	&.show {
		transform: translateY(0);
	}
	.header {
		padding: 0.3rem 0;
		@extend .pr;
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}
	.close {
		@extend .pa;
		top: 50%;
		transform: translateY(-50%);
		right: 0.3rem;
		@extend .common-icon;
		width: 0.38rem;
		height: 0.38rem;
        background-image: url('../assets/cloud/blue_close.png')
	}
	.mine {
		@extend .flex;
		align-items: center;
		width: 6.9rem;
		margin: 0 auto 0.3rem;
		padding: 0.2rem;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0px 0.04rem 0.16rem 0px rgba(0, 96, 255, 0.1);
		border-radius: 0.06rem;
	}
	.mine-rank {
		width: 0.4rem;
		font-size: 18px;
		font-weight: bold;
		color: #5E8BFB;
	}
	.avatar, .item-avatar {
		width: 0.8rem;
		height: 0.8rem;
		vertical-align: middle;
		border-radius: 50%;
		margin: 0 0.2rem 0 0.3rem;
		flex: 0 0 auto;
	}
	.item-avatar {
		margin-left: 0;
	}
	.info {
		@extend .flex;
		flex-direction: column;
		justify-content: space-around;
		// padding: 0.06rem 0;
		height: 0.8rem;
		box-sizing: border-box;
		text-align: left;
	}
	.name,
	.item-name {
		@extend .text-ellipsis;
		max-width: 3.5rem;
		font-size: 0.28rem;
		font-weight: bold;
		color: #333;
        text-align: left;
	}
	.msg,
	.item-msg {
		@extend .text-ellipsis;
		max-width: 3.5rem;
		font-size: 0.24rem;
		color: #999;
	}
	.item-name,
	.item-msg {
		max-width: 3.6rem;
	}
	.mine-num, .item-num {
		flex: 1;
		text-align: right;
		font-size: 0.36rem;
		font-weight: 800;
		color: #5E8BFB;
		&.gray {
			color: #333;
		}
	}
	.tab {
		@extend .flex;
		padding: 0 0.3rem 0.1rem;
		box-sizing: border-box;
		align-items: center;
		font-size: 0.24rem;
		color: #999;
	}
	.tab-name {
		margin-left: 0.5rem;
	}
	.progress {
		flex: 1;
		text-align: right;
	}
	.list {
		height: 45vh;
        overflow-y: auto;
	}
	.item {
		@extend .flex;
		align-items: center;
		padding: 0.2rem 0.3rem;
		box-sizing: border-box;
		&:nth-child(2n) {
			background: rgba(241, 248, 254, .7);
		}
	}
	.item-rank {
		@extend .text-ellipsis;
		max-width: 0.9rem;
		font-size: 0.26rem;
		font-weight: bold;
		color: #333;
        text-align: left;
		flex: 0 0 auto;
		img {
			width: 0.5rem;
			height: 0.6rem;
			vertical-align: middle;
		}
        &.pad-left {
            padding-left: 0.14rem;
            box-sizing: border-box;
        }
	}
}
.cloud-blind-box {
	background: rgba(0, 0, 0, .7);
	z-index: 11;
	.content {
		@extend .pa;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #fff;
	}
	.box-img {
		width: 4.94rem;
		height: 4.32rem;
		vertical-align: middle;
		margin-bottom: 0.2rem;
	}
	.tips {
		font-size: 0.36rem;
		font-weight: bold;
	}
	.btn {
		width: 4.2rem;
		text-align: center;
		height: 0.9rem;
		line-height: 0.9rem;
		margin: 0.4rem auto;
		background: linear-gradient(0deg, #C934F6 0%, #7424F5 100%);
		box-shadow: 0px 0.1rem 0px 0px #A72CCC;
		border-radius: 0.46rem;
		font-size: 0.36rem;
		font-weight: 800;
	}
	.msg {
		font-size: 0.28rem;
	}
}
.cloud-blind-box {
	background: rgba(0, 0, 0, .7);
	.content {
		@extend .pa;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #fff;
	}
	.box-img {
		width: 4.94rem;
		height: 4.32rem;
		vertical-align: middle;
		margin-bottom: 0.2rem;
	}
	.tips {
		font-size: 0.36rem;
		font-weight: bold;
	}
	.btn {
		width: 4.2rem;
		text-align: center;
		height: 0.9rem;
		line-height: 0.9rem;
		margin: 0.4rem auto;
		background: linear-gradient(0deg, #C934F6 0%, #7424F5 100%);
		box-shadow: 0px 0.1rem 0px 0px #A72CCC;
		border-radius: 0.46rem;
		font-size: 0.36rem;
		font-weight: 800;
	}
	.msg {
		font-size: 0.28rem;
	}
}
.poster-content{
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.5);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 665;
    .bg-light{
        width: 100%;
        height: 95%;
        // border: 1px solid #f00;
        background: url('../assets/bg-light.png') no-repeat center;
        background-size: cover;
    }
    .btn-content{
        width: 100%;
        display: flex;
        justify-content: space-around;
        position: absolute;
		bottom: -12vh;
        // top: 78vh;
        .btn{
            width: 3rem;
            height: 0.8rem;
            line-height: 0.8rem;
            text-align: center;
            background: linear-gradient(0deg, #1498EC 0%, #48C1FF 100%);
            border-radius: 0.4rem;
            font-size: 0.32rem;    
            font-weight: bold;
            color: #FFFFFF;
        }
    }
}
.vip-refund-dialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 1;
	.box {
		position: absolute;
		left: calc(50% - 140px);
		top: 50%;
		transform: translateY(-50%);
		width: 5.6rem;
		border-radius: 0.2rem;
		background: #fff;
		padding: 0.2rem 0;
		box-sizing: border-box;
		z-index: 999;
	}
	.title {
		text-align: center;
		font-size: 0.36rem;
		font-weight: bold;
	}
	
	.msg {
		padding: 0 0.6rem;
		box-sizing: border-box;
		font-size: 0.28rem;
	}
	.btn {
		display: flex;
		align-items: center;
		margin-top: 0.26rem;
		border-top: 1px solid #eee;
	}
	.btn-item {
		flex: 1;
		height: 0.34rem;
		line-height: 0.34rem;
		font-size: 0.36rem;
		padding: 0.3rem 0;
		text-align: center;
		&:first-child {
			color: #999;
		}
		&:last-child {
			position: relative;
			color: #48c1ff;
			&:before {
				position:absolute;
				content: '';
				display: block;
				top: 0px;
				bottom: 0;
				left: 0;
				width: 1px;
				background: #eee;
			}
		}
	}
}
#myCanvas,.myCanvas{
    position: absolute;
    top: 15vh;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 666;
}
#myCanvas{
	left: -1500px;
}
.cer-poster{
	width: 5.4rem;
	height: 7.56rem;
}
.tips{
	font-size: 12px;
	color: #fff;
}
</style>
